<script setup>
import pageCom from '@/components/pagecontainer.vue'
import chselect from '@/components/channelSelect.vue'
import artdDrawer from '@/components/articledrawer.vue'
import { atrlistService, artgetDetailService } from '@/api/atricle'
import { ref } from 'vue'
import { formatTime } from '@/utils/format'

const title = ref('文章管理')
//接口数据参数
const params = ref({
  pagenum: 1,
  pagesize: 5,
  cate_id: '',
  state: ''
})
const loading = ref(false)
const total = ref(0)
const artlist = ref([])
//获取数据函数
const getlist = async () => {
  loading.value = true
  const res = await atrlistService(params.value)
  artlist.value = res.data.data
  total.value = res.data.total
  loading.value = false

}
getlist()

const onSizeChange = (size) => {
  params.value.pagenum = 1
  params.value.pagesize = size
  getlist()
}
//
const onCurrentChangr = (page) => {
  params.value.pagenum = page
  getlist()

}
//条件搜索
const onSearch = () => {
  params.value.pagenum = 1
  getlist()
}
//重置标单
const onReset = () => {
  params.value.pagenum = 1
  params.value.cate_id = ''
  params.value.state = ''
  getlist()
}
//侧边抽屉弹出
const artedit = ref()
const onAdd = async () => {
  artedit.value.open({})
}
//编辑功能
const onEidt = (row) => {
  artedit.value.open(row)

}
//删除功能
const onDel = (row) => {

}
const onSuccess = (type) => {
  if (type === 'add') {
    const lastPage = Math.ceil((total.value + 1) / params.value.pagesize)
    params.value.pagenum = lastPage
    getlist()
  } else {
    getlist()
  }
}
</script>

<template>
  <!-- 共用组件 -->
  <pageCom :title="title">
    <!-- 头部 -->
    <template #extra>
      <div>
        <el-button type="primary" @click="onAdd">添加文章</el-button>
      </div>
    </template>
    <!-- 表单头部 -->
    <el-form inline>
      <el-form-item label="文章分类:">
        <chselect v-model="params.cate_id"></chselect>
      </el-form-item>
      <el-form-item label="发布状态:">
        <el-select placeholder="请选择" v-model="params.state" style="width: 240px">
          <el-option label="已发布" value="已发布"></el-option>
          <el-option label="草稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 内容表格 -->
    <el-table v-loading="loading" :data="artlist" style="width: 100%">
      <el-table-column prop="title" label="文章标题">
        <template #default="{ row }">
          <el-link type="primary" :underline="false">{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="cate_name" label="分类" />
      <el-table-column prop="pub_date" label="发表时间">
        <template #default="{ row }">
          {{ formatTime(row.pub_date) }}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" />
      <el-table-column label="操作">
        <template #default="{ row, $index }">
          <div>
            <el-button plain circle icon="Edit" @click="onEidt(row, $index)"></el-button>
            <el-button plain circle icon="Delete" @click="onDel(row, $index)"></el-button>
          </div>
        </template>
      </el-table-column>


      <template #empty>
        <el-empty description="莫得数据显示哦"></el-empty>

      </template>

    </el-table>
    <!-- 底部分页器 -->
    <el-pagination v-model:current-page="params.pagenum" v-model:page-size="params.pagesize"
      :page-sizes="[2, 4, 5]" background layout=" jumper,total, sizes, prev, pager, next,"
      :total="total" style="margin-top:20px; justify-content: flex-end;"
      @current-change="onCurrentChangr" @size-change="onSizeChange" />
    <!-- 侧边抽屉 -->
    <artdDrawer ref="artedit" @success="onSuccess"></artdDrawer>
  </pageCom>
</template>

<style lang="scss" scoped></style>